<template>
  <div class="detail">
    <h1>文章详情</h1>
    <div class="detailWrapper">
      <h5>标题：{{ article.title }}</h5>
      <h5>描述：{{ article.description }}</h5>
      <h5>类型：{{ article.type }}</h5>
      <div>
        <img :src="article.poster" width="200" />
      </div>
      <div v-html="article.detail">
        {{ article.detail }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Detail",
  data() {
    return {
      articleId: "",
      article: {},
    };
  },
  created() {
    this.articleId = this.$route.params.article_id;
    fetch(`http://120.27.209.174:1010/api/v1/posts/${this.articleId}`)
      .then((res) => res.json())
      .then((res) => {
        this.article = res;
        console.log(this.article);
        fetch("http://120.27.209.174:1010/api/v1/posts_type")
          .then((resp) => resp.json())
          .then((resp) => {
            for (let item of resp) {
              if (this.article.type === item.type) {
                this.article.type = item.text;
              }
            }
          });
      });
  },
};
</script>

<style lang="less">
.detail {
  text-align: left;
  font-size: 22px;
}
.detailWrapper {
  margin-left: 30px;
}
.detail h1 {
  display: block;
  margin-left: 20px;
}
</style>
